<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>应城市大气主要指标简报</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<div>

    <div style="text-align: center;margin-top: 20px;">

        <h1>应城市大气主要指标简报</h1>
    </div>


    <div class="layui-form"  style="margin-top: 20px;width: 60%;margin-left: 20%;">
        <div class="layui-form-item">
            <h5 style="margin-bottom: 16px;">
                日期选择<strong class="layui-font-red">开始时间-结束时间</strong>（默认每年1月1日到昨天） :
            </h5>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="ID-laydate-range">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input"
                                   placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input"
                                   placeholder="结束日期">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-block">
                <label class="layui-form-label">Authorization</label>
                <div class="layui-input-block">
                    <input type="text" name="Authorization" lay-verify="text" placeholder="有值时才校验" autocomplete="off"
                           class="layui-input" value="{{Authorization}}">
                </div>
            </div>

        </div>

        <div class="layui-form-item">
              <label class="layui-form-label">结果</label>
                <div class="layui-input-block" id="result">
{{message}}
                </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">生成简报</button>

            </div>
        </div>
    </div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
<script>
    layui.use(['form', 'laydate', 'util'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
        var tijiaotime = '{{KSSJ_time}} - {{JSSJ_time}}'
        var $ = layui.jquery;
        // 提交事件
        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            field['tijiaotime'] = tijiaotime;
            // 显示填写结果，仅作演示用


            $.ajax({
                type: 'POST',
                url: '/data',
                data: field,
                success: function (res) {
                    layer.msg(res.message);
                    document.getElementById("result").innerHTML = res.message;
                }
            });

            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });



        laydate.render({
            elem: '#ID-laydate-range',
            range: ['#ID-laydate-start-date', '#ID-laydate-end-date'],
            // 开始日期 - 结束日期
            value: tijiaotime,
            change: function (value, date) {
                layer.msg('你选择的日期是：' + value);
                tijiaotime = value;
            }
        });

    });
</script>

</body>
</html>